<template>
  <view class="category-nav">
    <view 
      class="nav-item" 
      v-for="category in categories" 
      :key="category.id"
      :class="{active: activeId === category.id}"
      @click="$emit('change', category.id)"
    >
      <text>{{ category.name }}</text>
      <view class="active-line" v-if="activeId === category.id"></view>
    </view>
  </view>
</template>

<script setup>
defineProps({
  categories: {
    type: Array,
    default: () => []
  },
  activeId: {
    type: String,
    default: ''
  }
})

defineEmits(['change'])
</script>

<style lang="scss" scoped>

.category-nav {
  display: flex;
  flex-direction: column;
  
  .nav-item {
    position: relative;
    padding: 30rpx 20rpx;
    font-size: $font-size-28rpx;
    color: $text-color;
    text-align: center;
    
    &.active {
      color: $primary-color;
      background-color: $white-bg;
      font-weight: bold;
    }
    
    .active-line {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 6rpx;
      height: 40rpx;
      background-color: $primary-color;
      border-radius: 3rpx;
    }
  }
}
</style>